Frontend Monorepo: Lerna un Nx darba vides pārvaldība

Nepārtraukti mainīgajā frontend izstrādes ainavā lielu un sarežģītu projektu pārvaldība var būt ievērojams izaicinājums. Tradicionālās vairāku repozitoriju (multi-repo) sistēmas, lai gan piedāvā izolāciju, var novest pie koda dublēšanās, atkarību pārvaldības problēmām un nekonsekventiem rīkiem. Šeit savu spēku parāda monorepo arhitektūra. Monorepo ir viens repozitorijs, kas satur vairākus projektus, bieži vien saistītus, kuri tiek būvēti un versijoti kopā. Šī pieeja piedāvā daudzas priekšrocības, bet efektīvai monorepo pārvaldībai ir nepieciešami specializēti rīki. Šajā rakstā aplūkoti divi populāri risinājumi: Lerna un Nx.

Kas ir Monorepo?

Monorepo ir versiju kontroles sistēmas repozitorijs, kas glabā kodu daudziem projektiem. Šie projekti var būt saistīti vai pilnīgi neatkarīgi. Galvenais ir tas, ka tie dala vienu un to pašu repozitoriju. Tādas kompānijas kā Google, Facebook, Microsoft un Uber ir veiksmīgi ieviesušas monorepo, lai pārvaldītu savas milzīgās kodu bāzes. Iedomājieties, ka Google glabā gandrīz visu savu kodu, ieskaitot Android, Chrome un Gmail, vienā repozitorijā.

Monorepo priekšrocības

• Koda koplietošana un atkārtota izmantošana: Viegli koplietot kodu starp projektiem bez sarežģītām pakošanas un publicēšanas darbplūsmām. Iedomājieties dizaina sistēmas bibliotēku, ko var netraucēti integrēt vairākās aplikācijās vienā un tajā pašā repozitorijā.
• Vienkāršota atkarību pārvaldība: Pārvaldiet atkarības vienuviet, nodrošinot konsekvenci visos projektos. Atjauninot koplietojamas bibliotēkas atkarību, automātiski tiek atjaunināti visi projekti, kas no tās ir atkarīgi.
• Atomāras izmaiņas: Veiciet izmaiņas, kas aptver vairākus projektus, vienā `commit`, nodrošinot konsekvenci un vienkāršojot testēšanu. Piemēram, refaktorings, kas ietekmē gan frontend, gan backend, var tikt veikts atomāri.
• Uzlabota sadarbība: Komandas var viegli sadarboties pie dažādiem projektiem vienā un tajā pašā repozitorijā, veicinot zināšanu apmaiņu un starpfunkcionālu izstrādi. Izstrādātāji var viegli pārlūkot un saprast kodu dažādās komandās.
• Konsekventi rīki un prakses: Ieviesiet konsekventus kodēšanas standartus, lintēšanas noteikumus un būvēšanas procesus visos projektos. Tas uzlabo koda kvalitāti un uzturēšanu.
• Vienkāršots refaktorings: Liela mēroga refaktoringa projekti ir vienkāršoti, jo viss saistītais kods atrodas vienā repozitorijā. Automatizētus refaktoringa rīkus var izmantot visā kodu bāzē.

Monorepo izaicinājumi

• Repozitorija izmērs: Monorepo var kļūt ļoti lieli, potenciāli palēninot klonēšanas un indeksēšanas operācijas. Tādi rīki kā `git sparse-checkout` un `partial clone` var palīdzēt mazināt šo problēmu.
• Būvēšanas laiks: Visa monorepo būvēšana var būt laikietilpīga, īpaši lieliem projektiem. Tādi rīki kā Lerna un Nx piedāvā optimizētus būvēšanas procesus, lai to risinātu.
• Piekļuves kontrole: Piekļuves ierobežošana konkrētām monorepo daļām var būt sarežģīta. Ir nepieciešama rūpīga piekļuves kontroles mehānismu plānošana un ieviešana.
• Rīku sarežģītība: Monorepo iestatīšana un pārvaldība prasa specializētus rīkus un zināšanas. Sākotnējā apguves līkne var būt stāva.

Lerna: JavaScript projektu pārvaldība monorepo

Lerna ir populārs rīks JavaScript projektu pārvaldībai monorepo. Tas optimizē darbplūsmu, kas saistīta ar vairāku pakotņu repozitoriju pārvaldību, izmantojot Git un npm. Tas ir īpaši piemērots projektiem, kas izmanto npm vai Yarn atkarību pārvaldībai.

Lerna galvenās funkcijas

• Versiju pārvaldība: Lerna var automātiski versijot un publicēt pakotnes, pamatojoties uz izmaiņām, kas veiktas kopš pēdējās izlaišanas. Tā izmanto `conventional commits`, lai noteiktu nākamo versijas numuru.
• Atkarību pārvaldība: Lerna pārvalda starppakotņu atkarības, nodrošinot, ka pakotnes monorepo ietvaros var būt atkarīgas viena no otras. Tā izmanto simboliskās saites (`symlinking`), lai izveidotu lokālās atkarības.
• Uzdevumu izpilde: Lerna var izpildīt komandas vairākās pakotnēs paralēli, paātrinot būvēšanas un testēšanas procesus. Tā atbalsta skriptu palaišanu, kas definēti `package.json`.
• Izmaiņu noteikšana: Lerna var noteikt, kuras pakotnes ir mainījušās kopš pēdējās izlaišanas, ļaujot veikt mērķtiecīgas būvēšanas un izvietošanas darbības.

Lerna lietošanas piemērs

Ilustrēsim Lerna lietošanu ar vienkāršotu piemēru. Pieņemsim, ka mums ir monorepo ar divām pakotnēm: `package-a` un `package-b`. `package-b` ir atkarīga no `package-a`.

monorepo/
├── lerna.json
├── package.json
├── packages/
│   ├── package-a/
│   │   ├── package.json
│   │   └── index.js
│   └── package-b/
│       ├── package.json
│       └── index.js

1. Inicializēt Lerna:

lerna init

Tas izveido `lerna.json` un atjaunina saknes `package.json`. Fails `lerna.json` konfigurē Lerna uzvedību.

2. Instalēt atkarības:

npm install
# or
yarn install

Tas instalē atkarības visām monorepo pakotnēm, pamatojoties uz `package.json` failiem katrā pakotnē.

3. Palaist komandu visās pakotnēs:

lerna run test

Tas izpilda `test` skriptu, kas definēts visu to pakotņu `package.json` failos, kurām tas ir definēts.

4. Publicēt pakotnes:

lerna publish

Šī komanda analizē `commit` vēsturi, nosaka, kuras pakotnes ir mainījušās, paaugstina to versijas, pamatojoties uz `conventional commits`, un publicē tās npm (vai jūsu izvēlētajā reģistrā).

Lerna konfigurācija

`lerna.json` fails ir Lerna konfigurācijas sirds. Tas ļauj pielāgot Lerna uzvedību, piemēram:

• `packages`: Norāda pakotņu atrašanās vietu monorepo. Bieži tiek iestatīts kā `["packages/*"]`.
• `version`: Norāda versiju piešķiršanas stratēģiju. Var būt `independent` (katrai pakotnei ir sava versija) vai fiksēta versija.
• `command`: Ļauj konfigurēt opcijas konkrētām Lerna komandām, piemēram, `publish` un `run`.

Piemērs `lerna.json`:

{
  "packages": [
    "packages/*"
  ],
  "version": "independent",
  "npmClient": "npm",
  "useWorkspaces": true,
  "command": {
    "publish": {
      "conventionalCommits": true,
      "message": "chore(release): publish"
    }
  }
}

Nx: Gudra, ātra un paplašināma būvēšanas sistēma

Nx ir jaudīga būvēšanas sistēma, kas nodrošina uzlabotas funkcijas monorepo pārvaldībai. Tā koncentrējas uz inkrementālo būvēšanu, aprēķinu kešošanu un uzdevumu orķestrēšanu, lai ievērojami uzlabotu būvēšanas laiku un izstrādātāju produktivitāti. Kamēr Lerna galvenokārt koncentrējas uz pakotņu pārvaldību, Nx nodrošina visaptverošāku pieeju visa monorepo darbplūsmas pārvaldībai, ieskaitot koda ģenerēšanu, lintēšanu, testēšanu un izvietošanu.

Nx galvenās funkcijas

• Inkrementālā būvēšana: Nx analizē jūsu projektu atkarību grafu un pārbūvē tikai tos projektus, kas ir mainījušies kopš pēdējās būvēšanas. Tas dramatiski samazina būvēšanas laiku.
• Aprēķinu kešošana: Nx kešo uzdevumu rezultātus, piemēram, būvējumus un testus, lai tos varētu atkārtoti izmantot, ja ievaddati nav mainījušies. Tas vēl vairāk paātrina izstrādes ciklus.
• Uzdevumu orķestrēšana: Nx nodrošina jaudīgu uzdevumu orķestrēšanas sistēmu, kas ļauj definēt sarežģītus būvēšanas konveijerus un tos efektīvi izpildīt.
• Koda ģenerēšana: Nx nodrošina koda ģenerēšanas rīkus, kas var palīdzēt ātri izveidot jaunus projektus, komponentes un moduļus, ievērojot labākās prakses un konsekventus standartus.
• Spraudņu ekosistēma: Nx ir bagātīga spraudņu ekosistēma, kas atbalsta dažādas tehnoloģijas un ietvarus, piemēram, React, Angular, Node.js, NestJS un citus.
• Atkarību grafa vizualizācija: Nx var vizualizēt jūsu monorepo atkarību grafu, palīdzot saprast attiecības starp projektiem un identificēt potenciālās problēmas.
• Ietekmētās komandas (`Affected Commands`): Nx nodrošina komandas, lai palaistu uzdevumus tikai tiem projektiem, kurus ietekmē konkrēta izmaiņa. Tas ļauj koncentrēt pūles uz tām jomām, kurām nepieciešama uzmanība.

Nx lietošanas piemērs

Ilustrēsim Nx lietošanu ar vienkāršotu piemēru. Mēs izveidosim monorepo ar React aplikāciju un Node.js bibliotēku.

1. Instalēt Nx CLI globāli:

npm install -g create-nx-workspace

2. Izveidot jaunu Nx darba vidi:

create-nx-workspace my-monorepo --preset=react
cd my-monorepo

Tas izveido jaunu Nx darba vidi ar React aplikāciju. Opcija `--preset=react` norāda Nx inicializēt darba vidi ar React specifiskām konfigurācijām.

3. Ģenerēt bibliotēku:

nx generate @nrwl/node:library my-library

Tas ģenerē jaunu Node.js bibliotēku ar nosaukumu `my-library`. Nx automātiski konfigurē bibliotēku un tās atkarības.

4. Būvēt aplikāciju:

nx build my-app

Tas būvē React aplikāciju. Nx analizē atkarību grafu un pārbūvē tikai nepieciešamos failus.

5. Palaist testus:

nx test my-app

Tas palaiž vienības testus React aplikācijai. Nx kešo testu rezultātus, lai paātrinātu nākamos testu palaišanas gadījumus.

6. Apskatīt atkarību grafu:

nx graph

Tas atver tīmekļa saskarni, kas vizualizē monorepo atkarību grafu.

Nx konfigurācija

Nx tiek konfigurēts, izmantojot `nx.json` failu, kas atrodas darba vides saknē. Šis fails definē darba vides projektus, to atkarības un uzdevumus, ko var uz tiem izpildīt.

Galvenās konfigurācijas opcijas `nx.json` ietver:

• `projects`: Definē darba vides projektus un to konfigurāciju, piemēram, to saknes direktoriju un būvēšanas mērķus.
• `tasksRunnerOptions`: Konfigurē uzdevumu izpildītāju (`task runner`), kas ir atbildīgs par uzdevumu izpildi un to rezultātu kešošanu.
• `affected`: Konfigurē, kā Nx nosaka, kuri projekti ir ietekmēti ar izmaiņām.

Piemērs `nx.json`:

{
  "npmScope": "my-org",
  "affected": {
    "defaultBase": "main"
  },
  "implicitDependencies": {
    "package.json": {
      "dependencies": "*",
      "devDependencies": "*"
    },
    ".eslintrc.json": "*"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx-cloud",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"],
        "accessToken": "...",
        "canTrackAnalytics": false,
        "showUsageWarnings": false
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["production", "default"],
      "outputs": ["{projectRoot}/dist"]
    }
  },
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "!{projectRoot}/dist/**/*", "!{projectRoot}/tmp/**/*"],
    "production": ["!{projectRoot}/**/*.spec.ts", "!{projectRoot}/**/*.spec.tsx", "!{projectRoot}/**/*.spec.js", "!{projectRoot}/**/*.spec.jsx"]
  },
  "generators": {
    "@nrwl/react": {
      "application": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "library": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "component": {
        "style": "css"
      }
    },
  }
}

Lerna pret Nx: Kuru izvēlēties?

Gan Lerna, gan Nx ir lieliski rīki frontend monorepo pārvaldībai, bet tie apmierina nedaudz atšķirīgas vajadzības. Šeit ir salīdzinājums, kas palīdzēs jums izvēlēties pareizo rīku savam projektam:

Funkcija	Lerna	Nx
Fokuss	Pakotņu pārvaldība	Būvēšanas sistēma un uzdevumu orķestrēšana
Inkrementālā būvēšana	Ierobežota (nepieciešami ārēji rīki)	Iebūvēta un augsti optimizēta
Aprēķinu kešošana	Nē	Jā
Koda ģenerēšana	Nē	Jā
Spraudņu ekosistēma	Ierobežota	Plaša
Apguves līkne	Zemāka	Augstāka
Sarežģītība	Vienkāršāks	Sarežģītāks
Pielietojums	Projekti, kas galvenokārt koncentrējas uz npm pakotņu pārvaldību un publicēšanu.	Lieli un sarežģīti projekti, kam nepieciešams optimizēts būvēšanas laiks, koda ģenerēšana un visaptveroša būvēšanas sistēma.

Izvēlieties Lerna, ja:

• Jums galvenokārt nepieciešams pārvaldīt un publicēt npm pakotnes.
• Jūsu projekts ir salīdzinoši mazs līdz vidēja izmēra.
• Jūs dodat priekšroku vienkāršākam rīkam ar zemāku apguves līkni.
• Jūs jau esat pazīstams ar npm un Yarn.

Izvēlieties Nx, ja:

• Jums nepieciešams optimizēts būvēšanas laiks un inkrementālā būvēšana.
• Jūs vēlaties koda ģenerēšanas iespējas.
• Jums ir nepieciešama visaptveroša būvēšanas sistēma ar uzdevumu orķestrēšanu.
• Jūsu projekts ir liels un sarežģīts.
• Jūs esat gatavs ieguldīt laiku, lai apgūtu jaudīgāku rīku.

Vai varat izmantot Lerna kopā ar Nx?

Jā, Lerna un Nx var izmantot kopā. Šī kombinācija ļauj izmantot Lerna pakotņu pārvaldības iespējas, vienlaikus gūstot labumu no Nx optimizētās būvēšanas sistēmas un uzdevumu orķestrēšanas. Nx var konfigurēt kā uzdevumu izpildītāju (`task runner`) priekš Lerna, nodrošinot inkrementālo būvēšanu un aprēķinu kešošanu Lerna pārvaldītajām pakotnēm.

Labākās prakses frontend monorepo pārvaldībai

Neatkarīgi no tā, vai izvēlaties Lerna vai Nx, labāko prakšu ievērošana ir būtiska, lai veiksmīgi pārvaldītu frontend monorepo:

• Izveidojiet skaidru projekta struktūru: Organizējiet savus projektus loģiski un konsekventi. Izmantojiet skaidru nosaukumu piešķiršanas konvenciju pakotnēm un bibliotēkām.
• Ieviesiet konsekventus kodēšanas standartus: Izmantojiet linterus un formaterus, lai nodrošinātu konsekventu koda stilu visos projektos. Tādus rīkus kā ESLint un Prettier var integrēt jūsu darbplūsmā.
• Automatizējiet būvēšanas un testēšanas procesus: Izmantojiet CI/CD konveijerus, lai automatizētu būvēšanas, testēšanas un izvietošanas procesus. Var izmantot tādus rīkus kā Jenkins, CircleCI un GitHub Actions.
• Ieviesiet koda pārskatīšanu: Veiciet rūpīgas koda pārskatīšanas, lai nodrošinātu koda kvalitāti un uzturēšanu. Izmantojiet `pull requests` un koda pārskatīšanas rīkus.
• Pārraugiet būvēšanas laiku un veiktspēju: Sekojiet līdzi būvēšanas laikam un veiktspējas metrikām, lai identificētu vājās vietas un uzlabojumu jomas. Nx nodrošina rīkus būvēšanas veiktspējas analīzei.
• Dokumentējiet savu monorepo struktūru un procesus: Izveidojiet skaidru dokumentāciju, kas izskaidro jūsu monorepo struktūru, izmantotos rīkus un tehnoloģijas, kā arī izstrādes darbplūsmas.
• Pieņemiet `Conventional Commits`: Izmantojiet `conventional commits`, lai automatizētu versiju piešķiršanas un izlaišanas procesus. Lerna atbalsta `conventional commits` jau no paša sākuma.

Noslēgums

Frontend monorepo piedāvā ievērojamas priekšrocības lielu un sarežģītu projektu pārvaldībā, ieskaitot koda koplietošanu, vienkāršotu atkarību pārvaldību un uzlabotu sadarbību. Lerna un Nx ir jaudīgi rīki, kas var palīdzēt jums efektīvi pārvaldīt frontend monorepo. Lerna ir lieliska izvēle npm pakotņu pārvaldībai, savukārt Nx nodrošina visaptverošāku būvēšanas sistēmu ar uzlabotām funkcijām, piemēram, inkrementālo būvēšanu un koda ģenerēšanu. Rūpīgi apsverot sava projekta vajadzības un ievērojot labākās prakses, jūs varat veiksmīgi ieviest frontend monorepo un gūt no tā labumus.

Atcerieties ņemt vērā tādus faktorus kā jūsu komandas pieredze, projekta sarežģītība un veiktspējas prasības, izvēloties starp Lerna un Nx. Eksperimentējiet ar abiem rīkiem un atrodiet to, kas vislabāk atbilst jūsu konkrētajām vajadzībām.

Veiksmi jūsu monorepo ceļojumā!